﻿"use client";
import React, { useEffect, useState } from 'react';
import { Button, Row, Col, Card, Typography, Space, Rate, Input, Empty } from 'antd';
import { CrownOutlined, FileProtectOutlined, HddOutlined } from "@ant-design/icons";
import AllBlogList from '@/components/biogComponent/AllBlogList';
import UserProgress from '@/components/UserProgress';
import { fetchBlogs } from '@/util/actions/blogAction';

const { Title } = Typography;
const { Search } = Input;

export default function Home() {
  const [blogs, setBlogs] = useState([]);
  const [keyword, setKeyword] = useState('');

  // 同步获取博客数据
  const loadBlogs = () => {
    console.log('调用 loadBlogs 函数，当前关键字:', keyword); // 调试信息
    fetchBlogs(keyword)
      .then((fetchedBlogs) => {
        console.log("接收到的博客数据:", fetchedBlogs);
        setBlogs(fetchedBlogs);
      })
      .catch((error) => {
        console.error('获取博客列表失败:', error);
      });
  };

  useEffect(() => {
    console.log('调用 useEffect,当前关键字:', keyword); // 调试信息
    loadBlogs(); // 初始加载博客数据
  }, [keyword]);

  const handleSearch = (value) => {
    console.log('调用 handleSearch,搜索关键字:', value); // 调试信息
    setKeyword(value);
  };

  return (
    <Row gutter={16}>
      <Col span={17}>
        <Row gutter={16}>
          <Col span={8}>
            <Card>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <div className="text-2xl flex items-center justify-center rounded-md h-12 w-12 bg-red-200">
                  <CrownOutlined />
                </div>
                <div>
                  <Title level={4} style={{ marginBottom: 0 }}>24</Title>
                  <Typography>Enrolled courses</Typography>
                </div>
              </div>
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <div className="text-2xl flex items-center justify-center rounded-md h-12 w-12 bg-green-200">
                  <HddOutlined />
                </div>
                <div>
                  <Title level={4} style={{ marginBottom: 0 }}>56</Title>
                  <Typography>Lessons</Typography>
                </div>
              </div>
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <div className="text-2xl flex items-center justify-center rounded-md h-12 w-12 bg-blue-200">
                  <FileProtectOutlined />
                </div>
                <div>
                  <Title level={4} style={{ marginBottom: 0 }}>17</Title>
                  <Typography>Certificates</Typography>
                </div>
              </div>
            </Card>
          </Col>
        </Row>
        <Search
          placeholder="请输入关键字"
          allowClear
          enterButton="搜索"
          size="large"
          onSearch={handleSearch}
          style={{ marginTop: 16 }}
        />
        {blogs.length > 0 ? (
          // <LearningTable blogs={blogs} />
           <AllBlogList blogs={blogs} />
        ) : (
          <Empty description="暂无数据" />
        )}
      </Col>
      <Col span={7}>
        <UserProgress />
        <Title level={5}>Popular Courses</Title>
        <Space direction="vertical" className="w-full">
          <Card>
            <Title level={5}>Python Basic</Title>
            <Rate disabled defaultValue={2} />
          </Card>
          <Card>
            <Title level={5}>Next JS Crash Course</Title>
            <Rate disabled defaultValue={4} />
          </Card>
        </Space>
      </Col>
    </Row>
  );
}
